<template>
  <div>
    <!--<list :render="renderFunc" :list="list"></list>-->
    <list :list="list">
      <count-to slot-scope="count" :end-val="count.number"></count-to>
    </list>
  </div>
</template>

<script>
import List from '_c/list'
import CountTo from '_c/count-to'
export default {
  components: {
    CountTo,
    List
  },
  data () {
    return {
      list: [
        { number: 100 },
        { number: 45 }
      ]
    }
  },
  methods: {
    renderFunc (h, number) {
//      return h('i', {
//        style: {
//          color: 'pink'
//        }
//      }, name)
      // JSX写法
      return (
        <CountTo nativeOn-click={this.handleClick} on-on-animation-end={this.onAnimationEnd} endVal={number}  style={{color: 'pink'}}></CountTo>
      )
    },
    handleClick (event) {
      console.log(event)
    },
    onAnimationEnd () {
      console.log('end')
    }
  }
}
</script>
